<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--部门数据-->
			<el-col :span="4" :xs="24">
				<div class="head-container">
					<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
				</div>
				<div class="head-container">
					<el-tree
						:data="deptOptions"
						:props="defaultProps"
						:expand-on-click-node="false"
						:filter-node-method="filterNode"
						ref="tree"
						node-key="id"
						default-expand-all
						:highlight-current="true"
						@node-click="handleNodeClick"
					/>
				</div>
			</el-col>
			<el-col :span="20" :xs="24">
				<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
					<el-form-item label="岗位编码" prop="code">
						<el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable size="small" @keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="岗位名称" prop="name">
						<el-input v-model="queryParams.name" placeholder="请输入岗位名称" clearable size="small" @keyup.enter.native="handleQuery" />
					</el-form-item>
					<!-- <el-form-item label="状态" prop="status">
						<el-select v-model="queryParams.status" placeholder="岗位状态" clearable size="small">
							<el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
						</el-select>
					</el-form-item> -->
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>

				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5"><el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:post:add']">新增</el-button></el-col>
					<!-- <el-col :span="1.5">
						<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:post:edit']">修改</el-button>
					</el-col> -->
					<el-col :span="1.5">
						<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:post:remove']">删除</el-button>
					</el-col>
					<el-col :span="1.5">
						<el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" v-hasPermi="['system:post:export']">导出</el-button>
					</el-col>
					<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
				</el-row>

				<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column label="岗位编号" align="center" prop="id" />
					<el-table-column label="岗位编码" align="center" prop="code" />
					<el-table-column label="岗位名称" align="center" prop="name" />
					<el-table-column label="所属部门" align="center" prop="department">
						<template slot-scope="scope">
							<span>{{ scope.row.department ? scope.row.department.name : '--' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="岗位排序" align="center" prop="sort" />
					<!-- <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" /> -->
					<!-- <el-table-column label="创建时间" align="center" prop="createTime" width="180">
						<template slot-scope="scope">
							<span>{{ parseTime(scope.row.createTime) }}</span>
						</template>
					</el-table-column> -->
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
			</el-col>
		</el-row>
		<!-- 添加或修改岗位对话框 -->
		<el-dialog v-dialog-drag :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="岗位名称" prop="name"><el-input v-model="form.name" placeholder="请输入岗位名称" /></el-form-item>
				<el-form-item label="岗位编码" prop="code"><el-input v-model="form.code" placeholder="请输入编码名称" /></el-form-item>
				<el-form-item label="岗位顺序" prop="sort"><el-input-number v-model="form.sort" controls-position="right" :min="0" /></el-form-item>
				<el-form-item label="所属部门" prop="department">
					<treeselect v-model="form.department" :options="deptOptions" :normalizer="normalizer" placeholder="选择所属部门" />
				</el-form-item>
				<el-form-item label="关联角色" prop="roles">
					<el-checkbox-group v-model="form.roles">
						<el-checkbox v-for="item in roleOptions" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<!-- <el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /></el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listPost, onePostForEdit, delPost, addPost, updatePost, exportPost } from '@/api/system/post';

import { listDept } from '@/api/system/dept';

import { listRole } from '@/api/system/role';

import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';

export default {
	name: 'Post',
	components: { Treeselect },
	data() {
		return {
			// 部门数据
			deptOptions: [],
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			deptName: '',

			// 角色数据
			roleOptions: [],

			// 遮罩层
			loading: true,
			// 导出遮罩层
			exportLoading: false,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 岗位表格数据
			postList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,

			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				code: "",
				name: "",
				deptId: undefined
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				name: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
				code: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
				sort: [{ required: true, message: '岗位顺序不能为空', trigger: 'blur' }],
				department: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
				roles: [{ required: true, message: '关联角色不能为空', trigger: 'blur' }],
			},
			rootDeptId:0
		};
	},
	created() {
		this.getList();
		this.getDeptList();
		this.getRoleList();
	},
	watch: {
		// 根据名称筛选部门树
		deptName(val) {
			this.$refs.tree.filter(val);
		}
	},
	methods: {
		getDeptList() {
			let data = {
				page: 1,
				limit: 1000,
				_order: ["sort"],
        _tree:true,
        _where: {
				  parent__id__isnull:true
        }
			}
			listDept(data).then(response => {

				// let list = response.data.lists.map(item => {
				// 	item.parentId = item.parent ? item.parent.id : null;
				// 	return item;
				// });
				// this.deptOptions = this.handleTree(list, 'id');
        this.deptOptions = response.data.lists
				this.rootDeptId = this.deptOptions[0].id
			});
		},
		// 获取角色数据
		getRoleList() {
			let data = {
				page: 1,
				limit: 1000,
				_order: ["sort"],
			};
			listRole(data).then(response => {
				this.roleOptions = response.data.lists;
			});
		},
		/** 转换部门数据结构 */
		normalizer(node) {
			if ((node.children && !node.children.length) || node.children == null) {
				delete node.children;
			}
			return {
				id: node.id,
				label: node.name,
				children: node.children
			};
		},
		// 筛选节点
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		// 节点单击事件
		handleNodeClick(data) {
			this.queryParams.deptId = data.id;
			this.getList();
		},

		/** 查询岗位列表 */
		getList() {
			this.loading = true;
			let data = {
				"page": this.queryParams.pageNum,
				"limit": this.queryParams.pageSize,
				_order: ["sort"],
			}
			if(this.queryParams.deptId && this.queryParams.deptId != this.rootDeptId) {
				data["_where"] = {
					"department": this.queryParams.deptId
				}
			}
			if(this.queryParams.name != "" && this.queryParams.code == "") {
				data["_where"] = {
					"name__icontains": this.queryParams.name
				}
			}
			if(this.queryParams.code != '' && this.queryParams.name == "") {
				data["_where"] = {
					"code__icontains": this.queryParams.code
				}
			}
			if(this.queryParams.code != '' && this.queryParams.name != "") {
				data["_where"] = {
					"code__icontains": this.queryParams.code,
					"name__icontains": this.queryParams.name
				}
			}
			listPost(data).then(response => {
				this.postList = response.data.lists;
				this.total = response.data.query.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				code: undefined,
				name: undefined,
				sort: 0,
				department: undefined,
				roles: []
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id);
			this.single = selection.length != 1;
			this.multiple = !selection.length;
		},

		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加岗位';
			this.getDeptList();
			// this.getRoleList();
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids;
      onePostForEdit(id).then(response => {
				this.form = response.data;
				this.form.department = response.data.department;
				this.form.roles = response.data.roles;
				console.log(this.roleOptions);
				console.log(this.form)
				this.open = true;
				this.title = '修改岗位';
			});
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					if (this.form.id != undefined) {
						updatePost(this.form).then(response => {
							this.msgSuccess('修改成功');
							this.open = false;
							this.getList();
						});
					} else {
						addPost(this.form).then(response => {
							this.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const postIds = row.id != undefined ? [row.id] : this.ids;

			this.$confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(function() {
					let data = {
						ids: postIds
					};
					return delPost(data);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有岗位数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.exportLoading = true;
					return exportPost(queryParams);
				})
				.then(response => {
					this.download(response.msg);
					this.exportLoading = false;
				})
				.catch(() => {});
		}
	}
};
</script>
